<template>
	<div class="header-content">
		<div class="l-content">
			<el-button size="small" icon="el-icon-menu" plain @click="collapseMenu"></el-button>
			<el-breadcrumb separator="/">
				<el-breadcrumb-item v-for="bread in breads" :key="bread.id">{{ bread.label }}</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="r-content">
			<el-dropdown>
				<img :src="profileUrl" alt="头像" class="profile">
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item>个人中心</el-dropdown-item>
					<el-dropdown-item @click.native="logOut">退出</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</div>
	</div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex';
export default {
	data() {
		return {
			profileUrl: require('../images/lxy.webp')
		}
	},
	computed: {
		...mapGetters('pannel', ['breads'])
	},
	methods: {
		logOut() {
			localStorage.removeItem('token');
			this.$router.push('login');
		},
		...mapMutations('pannel', ['collapseMenu'])
	}
}
</script>

<style lang="less" scoped>
	.inlineflex {
		display: inline-flex;
		align-items: center;
	}
	.header-content {
		height: 100%;
		display: flex;
		justify-content: space-between;
		.l-content, 
		.r-content {
			.inlineflex()
		}
		.el-breadcrumb {
			margin-left: 20px;
			/deep/ .el-breadcrumb__inner {
				color: white;
			}
		}
		.profile {
			width: 40px;
			height: 40px;
			border-radius: 50%;
		}
	}
</style>